<template>
  <div class="cart">
    <div style="width: 1200px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="商品信息" width="220">
          <template v-slot="scope">
            <div style="display: flex; align-items: flex-start;">
              <el-image :src="scope.row.productUrl" alt="" style="width: 60px; height: 60px;"></el-image>
              <span style="margin-left: 20px;">{{ scope.row.productName }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 根据你的数据结构调整 prop 字段 -->
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="quantity" label="数量"> </el-table-column>
        <!-- 假设金额可以计算得出 -->
        <el-table-column label="金额" width="120">
          <template slot-scope="scope">
            {{ scope.row.price * scope.row.quantity }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-link type="primary" :underline="false">移入收藏夹</el-link><br/> -->
            <el-link type="primary" :underline="false" @click="deleteCart(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="settleSelectedItems">结算选中的商品</el-button>
      </div>
    </div>
    <br/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        userId: null,
        pagenum: 1,
        pagesize: 10
      },
      tableData: [],
      multipleSelection: []
    }
  },
  created() {
    this.queryInfo.userId = +window.localStorage.getItem('userID')
    this.fetchCartData()
  },
  methods: {
    async fetchCartData() {
        const { data: res } = await this.$axios.get('/shopping-cart/search', { params: this.queryInfo })
        console.log(res)
        this.tableData = res.data.shoppcart
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    settleSelectedItems() {
      if (this.multipleSelection.length === 0) {
        alert('请至少选择一个商品进行结算')
        return
      }
      this.$router.push({ path: '/buy', query: { selectedItems: this.multipleSelection } })
      console.clear()
      console.log('结算的商品:', this.multipleSelection)
      console.dir(this.multipleSelection)
      // 实现结算逻辑
      // this.setDateArray(this.multipleSelection)
    },
    // 删除购物车
    async deleteCart(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '删除购物车商品', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
      const { data: res } = await this.$axios.post('/shopping-cart/delete', [id])
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      // 刷新购物车
      this.fetchCartData()
    }
  }
}
</script>

<style scoped>
.cart {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
